﻿
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.signalR.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/signalr/hubs")"></script>


<div id='mapbody'>    
    <div id='map'></div>
</div>

<div id="legend">
	<label for="userCount">Mapped Users: </label>
	<span id="userCount">0</span>
</div>


<script type="text/javascript">

    var map = null;

    $(function () 
    {   
        // Create the connection to our SignalR MapHub.
        var signalRMapHub = $.connection.mapHub;

        // Define some Javascript methods the server-side Hub can invoke.

        // Add a new client to the map.
        signalRMapHub.addClient = function (client) 
        {
            var pins = getPushPins();
            addClient(client);
            centerMap();
            $("#userCount").html(pins.length + 1)
        };

        // Remove a client from the map.
        signalRMapHub.removeClient = function (client) 
        {
            for (var i = map.entities.getLength() - 1; i >= 0; i--) 
            {
                var pushpin = map.entities.get(i);
                if (pushpin instanceof Microsoft.Maps.Pushpin) 
                {
                    if (pushpin.getLocation().latitude == client.Latitude && pushpin.getLocation().longitude == client.Longitude) 
                    {
                        map.entities.removeAt(i);
                        var pins = getPushPins();
                        $("#userCount").html(pins.length)
                    }
                }
            }
        };

        // Start the SignalR Hub.
        $.connection.hub.start(function () 
        {
            showMap();
        });
    
    });



    function addClient(client) 
    {
        var location = new Microsoft.Maps.Location(client.Latitude, client.Longitude);
        var pushpin = new Microsoft.Maps.Pushpin(location, { text: 'P' });
        map.entities.push(pushpin);
    }

    function showMap() 
    {
        var mapOptions = {
            credentials: "AuoGTNP56_kmS3IKUa0E-p_PBX1oWJO6WTpw2xFd-hZqFsffSh3FhKGXhFHQD52y",
            center: new Microsoft.Maps.Location(39.80, -98.55),
            zoom: 5
        }
        map = new Microsoft.Maps.Map(document.getElementById("map"), mapOptions);
    }

    function centerMap() 
    {
        var pins = getPushPins();

        var locations = [];
        for (var i = pins.length - 1; i >= 0; i--)
            locations.push(pins[i].getLocation());

        map.setView({
            bounds: Microsoft.Maps.LocationRect.fromLocations(locations),
            zoom: 6
        });

    }

    function getPushPins() 
    {
        var pins = [];
        for (var i = map.entities.getLength() - 1; i >= 0; i--) {
            var pushpin = map.entities.get(i);
            if (pushpin instanceof Microsoft.Maps.Pushpin) {
                pins.push(pushpin);
            }
        }
        return pins;
    }
	
</script>



